<template>
	<div id="app">
		<div>
			<span>全选:</span>
			<!-- 复选框使用v-model单独绑定一个响应式布尔值
			     布尔值的true/false会影响选框的勾选，true：勾选，false：取消
				 同时，页面上选框的变化也会改变布尔值的true/false-->
			<!-- <input type="checkbox" v-model="isAllChecked"
			@click="changeAll"/> -->
			<input type="checkbox" v-model="isAllChecked"/>
			<button>反选</button>
			<ul>
				<li v-for="(item, index) in arr" :key="index">
					<input type="checkbox" v-model="item.checked"/>
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive, ref, computed
	} from 'vue'
	const arr = reactive([
		{
			name: "猪八戒",
			checked: false,  // 为了给当前行的复选框使用的
		},
		{
			name: "孙悟空",
			checked: false,
		},
		{
			name: "唐僧",
			checked: false,
		},
		{
			name: "白龙马",
			checked: false,
		},
	])
	// const flag = ref(false)  // 响应式，计算属性的结果
	const isAllChecked = computed({
		// 计算过程
		get() {
			// 根据find，找数组中是否有一个对象的checked是false
			let obj = arr.find(item => item.checked === false) // 返回第一个符合条件的对象
			if(obj) {
				return false
			} else {
				return true
			}
		},
		// 预修改
		set(value) {
			console.log('现在的值：' + isAllChecked.value)
			console.log('即将修改：' + value)
			// 这里修改后，会使isAllChecked重新计算
			arr.forEach(item => item.checked = value)
		}
	})
	
	// const changeAll = () => {
	// 	// 判断当前全选框是否选中了
	// 	console.log(isAllChecked.value)
	// 	if(isAllChecked.value) {
	// 		// true:现在是勾上的，即将去 取消勾选
	// 		console.log('去除')
	// 		// 将下面4个子选框全部取消，间接影响到全选框
	// 		arr.forEach(item => item.checked = false)
	// 	} else {
	// 		// false:现在没勾上，即将 勾上
	// 		console.log('勾选')
	// 		// 将下面4个子选框全部勾上，间接影响到全选框
	// 		arr.forEach(item => item.checked = true)
	// 	}
	// }
</script>

<style scoped>

</style>